<template>
  <div class="search">
      <div class="header">
          <span class="iconfont iconjiantou2" @click="back"></span>
          <div class="middle">
              <span class="iconfont iconsearch"></span>
              <input type="text" v-model="searchText" class="searchText" placeholder="请输入关键字">
          </div>
          <div class="btnSearch" @click="search">搜索</div>
      </div>
      <div class="suggestion" v-if="!resultList.length">
          <div class="history">
            <h2>历史记录</h2>
            <span v-for="(item,index) of historyList" :key="index" @click="searchByWord(item)">{{item}}</span>
          </div>
          <div class="hot">
              <h2>热门搜索</h2>
              <span v-for="(item,index) of hotList" :key="index" @click="searchByWord(item)">{{item}}</span>
          </div>
      </div>
      <div  v-if="resultList.length > 0">
      <post v-for="(item,index) of resultList" :key="index" :item="item"/>
      </div>
  </div>
</template>

<script>
import post from '../components/post'
export default {
    components: {
        post
    },
    data(){
        return {
            // 创建个变量用来接收用户输入的关键字
            searchText: '',
            // 创建个空数组用来接收文章数据
            resultList: [],
            // 创建个空数组用来接收热门搜索数据
            hotList:[],
            // 创建个空数组用来接收历史记录信息
            historyList: localStorage.getItem('searchHistory') ? JSON.parse(localStorage.getItem('searchHistory')) : []
        }
    },
    mounted(){
        // 挂载完毕，渲染热门搜索内容
        this.getHotList();
    },
    watch:{
        // 监听当this.searchText为空的时候，把文章数组设置为空，实现隐藏文章
        searchText(){
            if(this.searchText == ''){
                // 把数组设置为空
                this.resultList= []
            }
        },
        // 监听当历史记录数据发生变化的时候，把数组转换为字符串，存入本地存储
        historyList(){
            const strHistory = JSON.stringify(this.historyList);
            localStorage.setItem('searchHistory',strHistory);
        }
    },
    methods: {
        // 点击返回键时，当inpu里有值的时候，把里面值清空，触发监听器当searchText发生变化，把文章数组变为空，实现隐藏文章列表，返回搜索页
        back(){
            if(this.searchText){
                this.searchText = '';
                // this.resultList= []
                // 否则直接跳回首页
            }else{
                this.$router.back();
            }
        },
        // 模仿一个热门搜索数据
         getHotList(){
             this.hotList = [
                 '亲爱的姑娘我爱你',
                 '性感女歌手',
                 '说好不哭',
                 '关晓彤回家吃饭了',
             ]
         },
        //  用户输入关键字，发生axios获取相关的文章视频数据
         searchByWord(item){
             this.searchText = item;
             this.search();

         },
        //  点击搜索发生axios，获取输入关键字的文章数据
        search(){
            this.$axios({
                url: '/post_search',
                method: 'get',
                params:{
                    keyword: this.searchText
                }
            }).then(res=>{
                const {data} = res.data;
                this.resultList = data;
                if(this.historyList.indexOf(this.searchText) < 0){
                    this.historyList.push(this.searchText);
                }
                console.log(res)
            })
        }
    }

}
</script>

<style lang="less" scoped>
    .search{
        padding: 2.778vw;
    }
    .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .iconfont{
            font-size: 4.167vw;

        }
        .middle{
            flex: 1;
            height: 10.556vw;
            border: 1px solid #000;
            display: flex;
            align-items: center;
            padding: 0 4.167vw;
            border-radius: 5.278vw;
            margin: 0 2.778vw;
        }
        .searchText{
            height: 100%;
            width: 100%;
            border: none;
            outline: none;
            padding-left: 1.389vw;
        }
        .btnSearch{
            font-size: 3.889vw;
        }
    }
    .suggestion{
        padding-top: 4.167vw;
        .history{
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 4.167vw;
            span{
                display: inline-block;
                margin-bottom: 2.778vw;
                margin-right: 2.778vw;
                font-size: 3.611vw;
            }
            
        }
        h2{
            font-size: 3.889vw;
            margin-bottom: 2.778vw;
        }
        .hot{
            span{
                display: inline-block;
               margin-bottom: 2.778vw;
                width: 50%;
                font-size: 3.611vw;
            //  margin-right:8.333vw;
                
            }
        }
    }
   
    
</style>